import React, { Component, Suspense } from 'react';
import GridContent from '@/components/PageHeaderWrapper/GridContent';
import { FormattedMessage } from 'umi-plugin-react/locale';
import { Menu } from 'antd';
import { connect } from 'dva';
import styles from './SubjectList.less';

const SubjectNotification = React.lazy(() => import('./SubjectNotification'));
const SubjectSelect = React.lazy(() => import('./SubjectSelect'));
const SubjectResult = React.lazy(() => import('./SubjectResult'));
const SubjectRetire = React.lazy(() => import('./SubjectRetire'));

const { Item } = Menu;

@connect(({ subject, loading }) => ({
  subject,
  loading: loading.models.subject,
}))
class SubjectList extends Component {
  state = {
    mode: 'inline',
    menuMap: {
      notification: <FormattedMessage id="app.subject.notification" defaultMessage="选课公告" />,
      select: <FormattedMessage id="app.subject.select" defaultMessage="网上选课" />,
      result: <FormattedMessage id="app.subject.result" defaultMessage="选课结果" />,
      retire: <FormattedMessage id="app.subject.retire" defaultMessage="退课" />,
    },
    selectKey: 'notification',
  };

  componentDidMount() {
    window.addEventListener('resize', this.resize);
    this.resize();

    const { dispatch } = this.props;
    dispatch({
      type: 'subject/fetch',
    });
  }

  componentWillUnmount() {
    window.removeEventListener('resize', this.resize);

    const { dispatch } = this.props;
    dispatch({
      type: 'subject/clear',
    });
  }

  resize = () => {
    if (!this.main) {
      return;
    }
    requestAnimationFrame(() => {
      let mode = 'inline';
      const { offsetWidth } = this.main;
      if (this.main.offsetWidth < 641 && offsetWidth > 400) {
        mode = 'horizontal';
      }
      if (window.innerWidth < 768 && offsetWidth > 400) {
        mode = 'horizontal';
      }
      this.setState({
        mode,
      });
    });
  };

  selectKey = ({ key }) => {
    this.setState({
      selectKey: key,
    });
  };

  getRightTitle = () => {
    const { selectKey, menuMap } = this.state;
    return menuMap[selectKey];
  };

  getmenu = () => {
    const { menuMap } = this.state;
    return Object.keys(menuMap).map(item => <Item key={item}>{menuMap[item]}</Item>);
  };

  getContent = () => {
    const { selectKey } = this.state;
    const {
      subject: { resultList },
    } = this.props;

    switch (selectKey) {
      case 'notification':
        return <SubjectNotification />;
      case 'select':
        return <SubjectSelect />;
      case 'result':
        return <SubjectResult resultList={resultList} />;
      case 'retire':
        return <SubjectRetire />;
      default:
        return <SubjectNotification />;
    }
  };

  render() {
    const { mode, selectKey } = this.state;
    const { loading } = this.props;

    return (
      <GridContent loading={loading}>
        <div
          className={styles.main}
          ref={ref => {
            this.main = ref;
          }}
        >
          <div className={styles.leftmenu}>
            <Menu mode={mode} selectedKeys={[selectKey]} onClick={this.selectKey}>
              {this.getmenu()}
            </Menu>
          </div>
          <div className={styles.right}>
            <div className={styles.title}>{this.getRightTitle()}</div>
            <Suspense fallback={null}>
              {/* {selectKey === 'notification' ? <SubjectNotification /> : <SubjectResult />} */}
              {this.getContent()}
            </Suspense>
          </div>
        </div>
      </GridContent>
    );
  }
}

export default SubjectList;
